<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        @submit.native.prevent
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        @enter="handleQuery"
        label-width="90px"
      >
        <el-form-item label="业务系统编码" prop="operationCode">
          <common-input
            v-model="queryParams.operationCode"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="业务系统名称" prop="operationName">
          <common-input
            v-model="queryParams.operationName"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="上线" :value="0"></el-option>
            <el-option label="下线" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <common-dept
          v-show="false"
          ref="commonDept"
          :currentParent="currentParent"
          @getDeptId="getDeptId"
          @getDeptList="getDeptList"
          @getLoading="getLoading"
        ></common-dept>
      </el-form>
    </common-search>

    <el-row :gutter="10" class="mb8" slot="tools">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          @click="handleAdd"
          v-hasPermi="['datahandler:operationsystem:add']"
          >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          :disabled="ids.length < 1"
          @click="handleDelete"
          v-hasPermi="['datahandler:operationsystem:remove']"
          >批量删除
        </el-button>
      </el-col>
    </el-row>

    <common-table
      v-loading="loading"
      slot="content"
      :data="businessList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="业务系统编码"
        align="left"
        prop="operationCode"
        show-overflow-tooltip
      />
      <el-table-column
        label="业务系统名称"
        align="left"
        prop="operationName"
        show-overflow-tooltip
      />

      <el-table-column
        label="描述"
        align="left"
        prop="operationContent"
        show-overflow-tooltip
      />

      <el-table-column
        label="创建时间"
        align="left"
        prop="createTime"
        width="180"
        show-overflow-tooltip
      />

      <el-table-column label="状态" align="left" prop="status" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" type="success">上线 </el-tag>
          <el-tag v-if="scope.row.status === 1" type="danger">下线</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="left" width="160px">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-if="scope.row.status === 1"
            @click="handleStatus(scope.row)"
            v-hasPermi="['datahandler:operationsystem:edit']"
            >上线
          </el-button>

          <el-button
            type="text"
            v-if="scope.row.status === 0"
            @click="handleStatus(scope.row)"
            v-hasPermi="['datahandler:operationsystem:edit']"
            >下线
          </el-button>

          <el-button type="text" @click="handleDetail(scope.row)"
            >详情
          </el-button>

          <el-button
            type="text"
            @click="handleAdd(scope.row)"
            v-hasPermi="['datahandler:operationsystem:edit']"
            >编辑
          </el-button>

          <el-button
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['datahandler:operationsystem:remove']"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </common-table>

    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <business-add
      ref="businessAdd"
      :deptListParams="deptListParams"
      @submitForm="submitForm"
    ></business-add>
    <business-detail
      ref="businessDetail"
      :deptListParams="deptListParams"
      @submitForm="submitForm"
    ></business-detail>
  </common-list>
</template>

<script>
import {
  fetchList,
  businessDelete,
  businessEdit,
} from "@/api/datascan/businessSystem/index.js";
import BusinessAdd from "./components/businessAdd.vue";
import BusinessDetail from "./components/businessDetail.vue";

import BaseList from "@/mixins/BaseList";
export default {
  mixins: [BaseList],
  components: {
    BusinessAdd,
    BusinessDetail,
  },
  data() {
    return {
      ids: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        operationCode: null,
        operationName: null,
        status: null,
      },
      total: 0,
      businessList: [],
      loading: false,
      currentParent: 5,
      deptListParams: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getLoading() {},
    getDeptList(list) {
      this.deptListParams = list;
    },
    getDeptId(val) {},

    getList() {
      this.loading = true;
      fetchList(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            this.businessList = res.rows;
            this.total = res.total;
          } else {
            this.businessList = [];
            this.total = 0;
            this.handleListTips(res);
          }
        })
        .catch(() => {
          this.businessList = [];
          this.total = 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    handleStatus(row) {
      businessEdit({
        id: row.id,
        status: row.status === 0 ? 1 : 0,
      }).then((res) => {
        if (res && res.code === 200) {
          this.businessList.find((item) => {
            return item.id === row.id;
          }).status = row.status === 0 ? 1 : 0;
          if (row.status === 0) {
            this.$GlobalSuccessMessage("上线成功");
          } else {
            this.$GlobalSuccessMessage("下线成功");
          }
        } else {
          this.$GlobalErrorConfirm("编辑失败", res.msg);
        }
      });
    },

    handleAdd(row) {
      if (row.status === 0 && row.id) {
        this.$GlobalErrorConfirm("编辑失败", "上线状态下不允许编辑");
        return;
      }
      this.$refs.businessAdd.show(row ? { ...row } : {});
    },

    handleDetail(row) {
      this.$refs.businessDetail.show(row ? { ...row } : {});
    },

    handleDelete(row) {
      const ids = row.id || this.ids.join(",");

      let includeOnline = this.businessList.find((v) => {
        return this.ids.includes(v.id) && v.status === 0;
      });
      if (includeOnline) {
        this.$GlobalErrorConfirm("删除失败", "包含上线状态的数据");
        return;
      }

      if (row.status === 0) {
        this.$GlobalErrorConfirm("删除失败", "上线状态下不允许删除");
        return;
      }

      this.$GlobalDeleteConfirm().then(() => {
        businessDelete({ ids }).then((res) => {
          if (res && res.code == 200) {
            this.$GlobalSuccessMessage("删除成功");
            if (
              this.queryParams.pageNum > 1 &&
              ids.split(",").length === this.businessList.length
            ) {
              this.queryParams.pageNum -= 1;
            }
            this.getList();
          } else {
            this.$GlobalErrorConfirm("删除失败", res.msg);
          }
        });
      }).catch(()=>{});
    },

    submitForm() {
      this.getList();
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
    },
  },
};
</script>

<style lang="scss">
</style>